<!--
 * @Description: 资源管理---运维资源---数据目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <el-row class="form-row">
        <el-col :span="6">
            <div class="form-label"><span class="required" v-show="itemObj.required">*</span>{{itemObj.label}}</div>
        </el-col>
        <el-col :span="18">

            <el-date-picker
                    style="width:100%"
                    :disabled="disabledState"
                    v-model="itemVal"
                    size="small"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>

            <span v-if="itemObj.remark!=null">{{itemObj.remark}}</span>
        </el-col>
    </el-row>
</template>

<script>

    export default {
        name: "el-input-ctl",
        components: {},
        props: {
            disabledField: {
                type: Array, default: () => {
                    return []
                }
            },
            itemObj: {
                type: Object, default: () => {
                    return {}
                }
            }
        },
        computed: {
            disabledState(){
                if(this.itemObj["disabled"]===true){
                    return true;
                }
                return this.disabledField.includes(this.itemObj.id);
            },
            itemValue(){
                return this.itemObj.value;
            },
            //输入框的扩展样式
            inputExtClass() {
                if (this.hasRepError) {
                    return 'hasRepError';
                }
                return '';
            },
            icon() {
                if (this.hasRepError) {
                    return 'el-icon-warning';
                }
                return this.itemObj.icon || '';
            },
        },
        data() {
            return {
                hasRepError: false,
                errorMes: '',
                itemVal: this.itemObj.value,
            }
        },
        created() {

        },
        mounted() {
        },
        watch: {
            itemValue(newVal){
                this.itemVal=newVal;
            },
            itemVal(newVal) {
                this.$emit('input', newVal);
                if (newVal != null && newVal !== "") {
                    this.hasRepError = false;
                    this.validate();
                }
            }
        },
        methods: {
            //添加错误提示信息
            addMsgTitle(){
                this.$nextTick(()=>{
                    let els=this.$el.querySelectorAll(".el-icon-warning");
                    els.forEach((itemObj)=>{
                        itemObj.setAttribute("title",this.errorMes);
                    })
                })
            },
            validate() {
                if (this.itemObj.required && (this.itemObj.value == null || this.itemObj.value == "")) {
                    this.hasRepError = true;
                    this.errorMes = this.itemObj.label+"不能为空，请输入相应的值";
                    this.addMsgTitle();
                    return false;
                }
            },
            getErrorFlag(){
                if(this.itemObj.show){
                    return this.hasRepError;
                }
                return false;
            }
        }
    };
</script>
<style lang="scss">
    .el-input.el-input--small.hasRepError {
        input {
            border: 1px solid red;
        }

        .el-input__icon.el-icon-warning {
            color: red;
            cursor: pointer;
        }
    }
</style>